<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>退款申请</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link rel="stylesheet" href="../layui/css/layui.css">-->
<!--    <script src="../layui/layui.js"></script>-->
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
    <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
    <style type="text/css">
        @media screen and (max-width: 767px){
            .layui-field-title {
                margin: 5px 0 !important;
            }
            .layui-field-title legend {
                font-size: 0.8rem !important;
            }

            .layui-col-xs1 {
                min-width: 53px;
                height: 30px!important;
                font-size: 0.8rem!important;
                line-height: 30px!important;
            }
            .layui-col-xs11{
                width: 99% !important;
                font-size: 0.7rem!important;
            }
            #refundForm{
                width: 95% !important;
            }
            #refundForm .layui-form-item{
                width: 80%;
                font-size: 0.7rem;
                margin-bottom: 0px;
            }
            #refundForm .layui-form-item .layui-inline .layui-form-label,#refundForm .layui-form-item .layui-form-label{
                padding:0px 0px 5px 10px!important;
                text-align: left;
                margin: 0 !important;
                display: block !important;
                height: 20px !important;
            }
            #refundForm .layui-form-item .layui-inline{
                display: flex;
                flex-direction: column;
                margin-bottom: 5px;
            }
            #refundForm .layui-form-item .layui-input-inline,
            #refundForm .layui-form-item .layui-input-block{
                margin: 0 0 0 10px!important;
            }
            .layui-input-inline textarea{
                width: 100% !important;
            }
            #refundForm .layui-form-item .layui-input-inline  input,.layui-select-title input{
                height: 25px;
            }
            #refundForm .layui-form-item .layui-input-inline  input{
                max-width: 280px;
            }
            #refundForm .layui-form-item .layui-inline  .layui-input-inline .layui-form-radio i,
            #refundForm .layui-form-item .layui-inline .layui-input-inline  .layui-form-radio div,
            .layui-form-item .layui-input-block .layui-form-radio i,
            .layui-form-item .layui-input-block .layui-form-radio div{
                font-size: 0.7rem;
            }
            .layui-form-radio{
                line-height: 20px;
                margin: 0;
            }
            .layui-form-checkbox{
                height: 20px;
                line-height: 20px;
                padding-right: 15px;
            }
            .layui-form-checkbox span{
                font-size: 0.7rem;
                padding: 0 5px;
            }
            .layui-form-checkbox i{
                height: 18px;
                line-height: 18px;
                width: 15px;
                font-size: 0.7rem;
            }
            .layui-btn{
                padding: 0!important;
                width: 80px;
                height: 28px;
                line-height: 28px;
                font-size: 0.7rem;
            }
            .layui-form-mid{
                margin-left: 10px!important;
                font-size: 1rem!important;
                padding:0px!important;
                line-height: 15px!important;
            }
            /*时间选择器*/
            .layui-laydate{
                width: 90%;
                max-width: 272px;
                min-width: 169px;
                font-size: 0.6rem!important;
            }
            .layui-laydate-main{
                width: 100%;
                max-width: 272px;
            }
            .layui-laydate-header i{
                padding: 0 !important;
                font-size: 0.6rem!important;
            }
            .layui-laydate-header{
                padding: 10px 45px 5px;
                line-height: 15px
            }
            .layui-laydate-header .laydate-set-ym span{
                padding: 1px!important;
            }
            .layui-laydate-header i.laydate-prev-y {
                left: 5px;
            }
            .layui-laydate-header i.laydate-prev-m {
                left: 25px;
            }
            .layui-laydate-header i.laydate-next-y {
                right: 5px;
            }
            .layui-laydate-header i.laydate-next-m {
                right: 25px;
            }
            .layui-laydate-footer{
                height: 30px!important;
                line-height: 15px!important;
                padding: 3px!important;
            }
            .layui-laydate-footer span{
                line-height: 20px;
                height: 20px;
                padding: 0 3px!important;
                font-size: 0.7rem!important;
            }
            .layui-laydate-footer .laydate-footer-btns{
                top: 3px!important;
            }
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>退款申请</legend>
</fieldset>
<div>
    <div class="layui-col-xs1" style="text-align: center;height: 100px;font-size: 16px;line-height: 100px">
        <div>退款说明</div>
    </div>
    <div class="layui-col-xs11" style="margin-bottom: 20px;width: 1010px">
        <textarea name="" class="layui-textarea"readonly="readonly">
                        退款说明
注：退款方式：
    1.要求哪个账号汇款退哪个账号里
        </textarea>
    </div>
    <form class="layui-form" action="/process/refundadd" enctype="multipart/form-data" method="post" id="refundForm">
        <div class="layui-form-item">
            <div style="display: none"><input type="text"name="id" id="formid" th:value="${id}"></div>
            <div class="layui-inline">
                <label class="layui-form-label">退款类型</label>
                <div class="layui-input-block">
                    <select id="refundType" name="refundType" lay-verify="required"  lay-filter="refundType">
                        <option value="0"></option>
                        <option value="1">365</option>
                        <option value="2">大额</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" lay-verify="refundCategory">
            <label class="layui-form-label">退款种类</label>
            <div class="layui-input-block">
                <input type="radio" name="refundCategory" value="订金" title="订金" lay-filter="refundCategory" >
                <input type="radio" name="refundCategory" value="软件款" title="软件款" lay-filter="refundCategory" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:张三">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="telephone" lay-verify="telephone" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:13812345678">
                </div>
            </div>
        </div>
        <!--将收款方式的单选改为多选-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收款方式</label>
                <div class="layui-input-block" id="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="银行转账" title="银行转账" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="微信" title="微信" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="支付宝" title="支付宝" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="工行码" title="工行码" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="聚合码" title="聚合码" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="建行码" title="建行码" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="农行" title="农行" lay-verify="paymentMethod">
                    <input type="checkbox" name="paymentMethod" lay-skin="tag" value="招行码" title="招行码" lay-verify="paymentMethod">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收款时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="transferDate" id="transferDate" lay-verify="transferDate"  autocomplete="off" class="layui-input" placeholder="例:2000-09-01 09:01">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">退款金额(元)</label>
                <div class="layui-input-inline">
                    <input type="text" name="refundAmount" lay-verify="refundAmount" autocomplete="off" lay-affix="clear" class="layui-input" placeholder="例:1000">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">退款账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="refundAddress" lay-verify="refundAddress" autocomplete="off" lay-affix="clear" class="layui-input" placeholder="例:6222020000000000001">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">退款方式</label>
                <div class="layui-input-inline">
                    <input type="text" name="refundMethod" lay-verify="refundMethod" autocomplete="off" lay-affix="clear" class="layui-input" placeholder="例:xx银行xx支行">
                </div></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">退款日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="refundDate" id="refundDate" lay-verify="refundDate"  autocomplete="off" class="layui-input" placeholder="例:2000-09-01">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="height: 60px;display: flex;align-items: center;justify-content: center;">退款理由</label>
                <div class="layui-input-inline">
                    <textarea lay-verify="required" name="RefundRemarks" id="RefundRemarks" cols="100" rows="4" style="border-color: #eee;" ></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 85px;margin-left: 23px">实际使用期限</label>
                <div class="layui-inline" id="deposit">
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required" autocomplete="off" name="actualPeriodOfUseStart" id="actualPeriodOfUseStart" class="layui-input" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required" autocomplete="off" name="actualPeriodOfUseEnd" id="actualPeriodOfUseEnd" class="layui-input" placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 85px;margin-left: -7px">扣除业务业绩</label>
                <div class="layui-input-inline">
                    <input type="text" name="refundPerformance" lay-verify="refundPerformance" autocomplete="off" lay-affix="clear" class="layui-input"    placeholder="例:1000">
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="margin-left: -14px">业务员</label>
                <div class="layui-input-inline">
                    <input type="text" name="salesman" readonly lay-verify="required" autocomplete="off" class="layui-input" th:value="${userDetails.realName}">
                </div>
            </div>
            <div class="layui-inline" th:fragment="auditingPerson" th:id="IdauditingPerson">
                <label class="layui-form-label">审核人</label>
                <div class="layui-input-block">
                    <select id="auditingperson" name="auditingPerson" lay-verify="required" >
                        <option value=""></option>
                        <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <label class="layui-form-label" style="margin-left: -14px">抄送人</label>
            <div id="copyPersonSelect" class="xm-select-demo" style="width: 80%;margin-left: 95px"></div>
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-form-item" >
            <div class="layui-inline" style="padding-left: 22px;">
                <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" style="padding-left: 22px; margin-bottom: 20px;">提交退款单</button>
            </div>
        </div>
    </form>
</div>

<script>
    function deleteprocess() {
        // 创建表单数据对象
        var formData = new FormData();
        formData.append("id", layui.$("#formid").val());
        // 使用sendBeacon方法发送异步请求
        navigator.sendBeacon("/process/delete", formData);
    }
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;
        var isSelectRefundTypeFirst = false ;//标记是否是第一次选择
        var xm
        var keys=[]
        window.addEventListener("beforeunload",deleteprocess);
        $.ajax({
            url: "/user/queryforselect",
            type: "get",
            async: true,
            success: function (data) {
                if(data.data){
                    for (var i = 0; i < data.data.length; i++) {
                        var temp = {
                            "name": data.data[i].realName,
                            "value": data.data[i].username  //value为唯一标识，此处为id
                        }
                        keys.push(temp)
                    }
                    xm=xmSelect.render({
                        el: '#copyPersonSelect',
                        direction: 'up',
                        filterable: true,
                        data: keys
                    })
                }
            },
        });
        //退款类型选择器监听方法
        form.on('select(refundType)', function(data){
            var id = document.getElementById("formid").value;
            if (isSelectRefundTypeFirst){
                //为了第一次选择的时候不执行删除旧纪录，其他修改退款类型的时候删除旧纪录
                $.ajax({
                    url:"/process/delete",
                    type:"GET",
                    contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                    data:{
                        id:id
                    },
                    success:function (data){
                        console.log("旧记录回收成功！");
                    },
                    error:function (data){
                        console.log("旧记录回收失败");
                    }
                })
            };
            if (data.value == 1){
                //365退款
                $.ajax({
                    url : "/process/refundpage0",
                    type : "POST",
                    contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                    data:{
                        id:id
                    },
                    success : function (lb) {
                        $("#IdauditingPerson").html(lb);
                        layui.form.render("select");
                        isSelectRefundTypeFirst = true;
                    },
                    error:function (errorMsg) {
                        alert("请从新选择退款类型");
                    }
                });
            }else if (data.value == 2){
                //大额退款
                $.ajax({
                    url : "/process/refundpage1",
                    type : "POST",
                    contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                    data:{
                        id:id
                    },
                    success : function (lb) {
                        $("#IdauditingPerson").html(lb);
                        layui.form.render("select");
                        isSelectRefundTypeFirst = true;
                    },
                    error:function (errorMsg) {
                        alert("请从新选择退款类型");

                    }
                });
            }
        });
        form.on('submit(submitForm)', function(data){
            var copyPersons = xm.getValue();
            $(this).append("<input type='hidden' name='copyPersons' value='"+JSON.stringify(copyPersons)+"'>");
            var sindex=layer.load(2, {shade: [0.5,'#000']});
            window.removeEventListener("beforeunload",deleteprocess);
            // 手动触发表单的提交
            return true; // 返回 true 表示继续提交表单，返回 false 表示取消提交
        });
        //日期选择器的设置
        laydate.render({
            elem: '#transferDate',
            format: 'yyyy-MM-dd HH:mm', // 设定日期显示格式，精确到分
            type: 'datetime',
            fullPanel: true});
        laydate.render({
            elem: '#refundDate',
            format: 'yyyy-MM-dd', // 设定日期显示格式
            type: 'date',});
        // 日期范围 - 左右面板联动选择模式
        laydate.render({
            elem: '#deposit',
            range: ['#actualPeriodOfUseStart', '#actualPeriodOfUseEnd'],
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式
        });
        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            telephone: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if (!/^1[3456789]\d{9}$/.test(value)){
                    return  "请输入正确电话号码"}
            },
            transferDate: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            refundCategory: function(value){
                if($('input[name="refundCategory"]:checked').length < 1){
                    return '请选择退款种类';
                }
            },
            refundAddress: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            refundDate: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            refundRemarks: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            paymentMethod: function(value, item){
                var radioName = $(item).attr('name');
                var isChecked = false;
                $('input[name="' + radioName + '"]').each(function() {
                    if ($(this).is(':checked')) {
                        isChecked = true;
                        return false;
                    }
                });
                if (!isChecked) {
                    return '收款方式必填';
                }
            },
            refundMethod: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            refundAmount: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if (!/^[0-9]*$/.test(value)&& value.length>0){
                    return "请输入正确资金量";
                }
            },
            refundPerformance: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if (!/^[0-9]*$/.test(value)&& value.length>0){
                    return "请输入正确资金量";
                }
            }


        });

    });
</script>
</body>
</html>